<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref, onMounted } from "@vue/runtime-core"
import { areaList } from '@vant/area-data'
import { AddressEditInfo } from "vant"
import Toast from "vant/lib/toast";
import "vant/es/toast/style";

interface SaveType {
    addressDetail: string
    areaCode: string
    city: string
    country: string
    county: string
    isDefault: boolean
    name: string
    postalCode: string
    province: string
    tel: string
}

interface Site {
    adds: string
    name1: string
    name2: string
    name3: string
    number: string
    checked: boolean
    nikeName:string
}

const sitelist = ref<Site[]>([])
const sitelistObj = ref()
const selected = ref()
const nikeName = ref('')
const phone = ref('')
const address = ref('')
const show = ref(false)
const city = ref()
const name1 = ref('')
const name2 = ref('')
const name3 = ref('')


const showPopup = () => {
    show.value = true
}

// const onSave = (address: AddressEditInfo) => {
//     sitelistObj.value = address
//     if (sitelistObj.value.isDefault === false) {
//         sitelist.value = [...sitelist.value, sitelistObj.value]
//         // localStorage.sitelist = JSON.stringify(sitelist.value)
//         console.log(sitelist.value, 1111)
//     } else {
//         // sitelist.value = [sitelistObj.value, ...sitelist.value]
//         // localStorage.sitelist = JSON.stringify(sitelist.value)
//         console.log(sitelist.value, 222)
//     }
//     // contentress.value = content
//     // console.log(contentress.value, 2234)
//     // addressList.value.unshift(contentress.value)
//     // localStorage.addressList = JSON.stringify(addressList.value)
// }

const obj = ref()


const confirm = (e: any) => {
    name1.value = e[0].name
    name2.value = e[1].name
    name3.value = e[2].name

    show.value = false
}

const showAddress = () => {
    const reg = /^[1]([3-9])[0-9]{9}$/
    if (nikeName.value == '') {
        Toast('用户名不能为空')
    } else if (phone.value == '') {
        Toast('手机号不能为空')
    } else if (reg.test(phone.value) === false) {
        Toast('请输入正确的手机号')
    } else {
        sitelistObj.value = {
            nikeName:nikeName.value,
            adds: address.value,
            number: phone.value,
            name1: name1.value,
            name2: name2.value,
            name3: name3.value,
            checked: false
        }
        sitelist.value = [...sitelist.value, sitelistObj.value]
        localStorage.sitelist = JSON.stringify(sitelist.value)
        Toast('保存')
    }

}

const onSelected = (data: any) => {
    const { province, city, area } = data;
    if (!province.code && !city.code && !city.code) return;
    selected.value.province = province.value;
    selected.value.city = city.value;
    selected.value.area = area.value;
}

onMounted(() => {
    let arr = localStorage.sitelist
    if (arr) {
        sitelist.value = JSON.parse(arr)
    }
})
</script>

<template>
    <div>
        <div class="top">
            <van-icon name="arrow-left" @click="$router.go(-1)" />
        </div>
        <div class="ipt">
            <span>收货人:</span> <input type="text" ref="value1" v-model.trim="nikeName">
        </div>
        <div class="ipt">
            <span>手机号:</span> <input type="text" ref="value2" v-model.trim="phone">
        </div>
        <div>
            <div style="margin-bottom: 3px;margin-left: 10px;" @click="showPopup">省市选择:</div>
            <van-popup v-model:show="show" position="bottom" :style="{ height: '60%' }">
                <van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="confirm" />
            </van-popup>
            <div style="display: flex; margin-left: 95px;">
                <div>{{ name1 }}</div>
                <div>{{ name2 }}</div>
                <div>{{ name3 }}</div>
            </div>
        </div>
        <div class="ipt">
            <span>详细地址:</span> <input type="text" ref="value3" v-model.trim="address">
        </div>
        <div class="ipt">
            <span>编码:</span> <input type="text">
        </div>
        <div class="queren1" @click="showAddress">确认</div>
    </div>
</template>

<style lang="scss" scoped>
.top {
    width: 100vw;
    height: 45px;
    line-height: 45px;
}

.bm-view {
    width: 100%;
    height: 300px;
}

.label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;

    label {
        display: flex;
    }
}

.ipt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto;

    span {
        margin-left: 10px;
    }

    input {
        border: 1px solid #ccc;
        width: 260px;
        height: 30px;
        margin-left: 5px;
        margin-right: 13px;
    }
}

.queren1 {
    margin: 15px auto;
    width: 85px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f46;
    color: #fff;
}
</style>